<template>
<van-search class="navsearch"

  shape="round"
  background="node"
  placeholder="搜索好友"
/>
<div class="baoguo">
<van-index-bar class="friendsbgc" :index-list="indexList"  >
  <div  v-for="(value,keyy) in zoom" :key="keyy" >

  <van-index-anchor  :index="keyy" />
    <van-cell v-for="(item ,index ) in value" :key="index" > <div class="cellself"><img src="@\assets\touxiang\huahua.png" alt=""><p> <b> {{sortobj.obj[item]}}</b></p></div></van-cell>

  </div>

  <!-- <van-cell v-for="(item ,index) in sortobj.arrtobjc" :key="index" >
     <div class="cellself"><img src="@\assets\touxiang\huahua.png" alt="">
     <p> <b>{{sortobj.obj[item] }}</b></p>
     </div>
    </van-cell> -->

</van-index-bar>
<van-cell-group >
  <van-cell center > 554位好友</van-cell  >
</van-cell-group>

</div>
</template>

<script>
// import 
import Pinyin from '@/assets/tool/ChinesePY.js'
var namearyy = ['孔勇','马化腾',"陈全",'魏洋','钱磊','傅秀英','唐娟','郭明','许涛','龙英洋','汪秀兰','董丽','谢秀英','朱敏','周涛',"Allen","Allen","dsdw","2173",'#$%']
// console.log(namearyy.sort());
//获取字母分区
//分区添值
// 利用冒泡排序 对象映射
// 区域字母优先
//a:[]
// function(arr){
//     var firstN=[]
//     arr.forEach(element => {
//     // console.log( typeof Pinyin.GetQP(element[0])[0] );
//     Number( Pinyin.GetQP(element[0])[0])+"" == 'NaN' && typeof Pinyin.GetQP(element[0])[0] !=="undefined"  ? firstN.push(Pinyin.GetQP(element[0])[0]) : firstN.push("#")
//     });
//     firstN = [  ...new Set(firstN.sort()) ]
//     if(firstN[0]=="#"){
//         firstN.splice(0,1)
//         firstN.push("#")
//     }
//     return firstN
//   }

// console.log(sortobj);
import { toRefs } from 'vue'
export default {
  setup(props) {
  //  var rane= Mock.cname()
  //  console.log("模拟姓名",rane);
   var getFirst=Pinyin.getFirst(namearyy)
  //  console.log(getFirst);
    let sortobj = Pinyin.getChineseSort(namearyy)
    let zoom= Pinyin.getsortobj(getFirst,sortobj.arrtobjc)
    // console.log( navright=this.$store.getters.getnavright);
    // console.log(toRefs);
    // console.log(sortobj); 
    return {
      indexList: getFirst,
      sortobj,
      zoom,
    //  navright
    };
  },
  created: function(){
    this.$store.commit("channavright","+")
    this.$store.commit("chantrydarta","123+")
    
    console.log("asdasd",this.$store.getters.getnavright);
  }

}
</script>

<style lang="scss" scoped >
.navsearch{
  position: relative;
  z-index: 999999;
}
.baoguo{
  height: 26rem;
  overflow:scroll;
  overflow-x: hidden;
}
.friendsbgc{
    width: 15rem;
    margin: 0 auto;
    background-color: #f7f8fa;
    .cellself{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        p{
            padding-left: 0.5rem;
            font-size: 1.2em;
        }
    }
    img{
        width: 1.5rem;
        height: 1.5rem;
        // float: left;
    }
}
.van-index-anchor--sticky{
  top: 1rem;
}
:root{
  // 注意封闭了
  --van-cell-background-color:red;
}

</style>